<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>URL组成互动游戏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
            color: #fff;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            width: 100%;
        }

        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            background: linear-gradient(90deg, #00c6ff, #0072ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 0 10px rgba(0, 198, 255, 0.3);
        }

        .subtitle {
            font-size: 1.2rem;
            color: #a0d2ff;
            margin-bottom: 20px;
        }

        .games-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 40px;
            width: 100%;
            max-width: 1200px;
        }

        .game {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 25px;
            width: 100%;
            max-width: 550px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .game-title {
            font-size: 1.8rem;
            margin-bottom: 20px;
            text-align: center;
            color: #4df0ff;
            border-bottom: 2px solid rgba(77, 240, 255, 0.3);
            padding-bottom: 10px;
        }

        .example-url {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
            text-align: center;
            font-family: monospace;
            font-size: 1.1rem;
            border-left: 4px solid #4df0ff;
        }

        /* 配对游戏样式 */
        .matching-game {
            display: flex;
            justify-content: space-between;
            height: 400px;
        }

        .items-container {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 45%;
        }

        .item {
            background: linear-gradient(135deg, #ffffff, #f5f7fa);
            color: #2c3e50;
            padding: 15px;
            border-radius: 12px;
            text-align: center;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            border: 2px solid transparent;
        }

        .item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }

        .item.selected {
            border-color: #3498db;
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
        }

        .item.matched {
            background: linear-gradient(135deg, #2ecc71, #27ae60);
            color: white;
        }

        .canvas-container {
            width: 10%;
            position: relative;
        }

        canvas {
            width: 100%;
            height: 100%;
        }

        /* 拖拽游戏样式 */
        .drag-game {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .drag-container {
            display: flex;
            justify-content: space-between;
            gap: 15px;
            margin-bottom: 20px;
        }

        .drag-item {
            background: linear-gradient(135deg, #ffffff, #f5f7fa);
            color: #2c3e50;
            padding: 15px;
            border-radius: 12px;
            text-align: center;
            font-weight: bold;
            cursor: grab;
            transition: all 0.3s;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            flex: 1;
        }

        .drag-item:active {
            cursor: grabbing;
        }

        .drag-item.dragging {
            opacity: 0.7;
        }

        .drop-zone {
            background: rgba(255, 255, 255, 0.05);
            border: 2px dashed rgba(255, 255, 255, 0.3);
            border-radius: 12px;
            padding: 20px;
            min-height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: all 0.3s;
        }

        .drop-zone.active {
            border-color: #3498db;
            background: rgba(52, 152, 219, 0.1);
        }

        .drop-slot {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            padding: 12px 20px;
            min-width: 120px;
            min-height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }

        .drop-slot.filled {
            background: rgba(46, 204, 113, 0.2);
            border: 1px solid rgba(46, 204, 113, 0.5);
        }

        .feedback {
            text-align: center;
            font-size: 1.2rem;
            height: 30px;
            margin-top: 10px;
            transition: all 0.3s;
        }

        .success {
            color: #2ecc71;
        }

        .error {
            color: #e74c3c;
        }

        .controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
            width: 100%;
        }

        button {
            padding: 12px 25px;
            background: linear-gradient(135deg, #00c6ff, #0072ff);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 5px 15px rgba(0, 114, 255, 0.4);
        }

        button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 114, 255, 0.6);
        }

        button:active {
            transform: translateY(1px);
        }

        .score-container {
            display: flex;
            justify-content: space-between;
            width: 90%;
            max-width: 800px;
            margin-bottom: 20px;
            background: rgba(255, 255, 255, 0.1);
            padding: 15px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .score {
            font-size: 1.5rem;
            font-weight: bold;
            color: #4df0ff;
        }

        .url-explanation {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            padding: 15px;
            margin-top: 20px;
            font-size: 0.9rem;
            line-height: 1.5;
        }

        .student-id {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(255, 255, 255, 0.1);
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
        }

        @media (max-width: 768px) {
            .games-container {
                flex-direction: column;
                align-items: center;
            }
            
            .game {
                max-width: 100%;
            }
            
            .matching-game {
                height: 350px;
            }
            
            h1 {
                font-size: 2rem;
            }
            
            .drop-zone {
                flex-direction: column;
            }
            
            .student-id {
                position: relative;
                top: 0;
                right: 0;
                margin-bottom: 15px;
            }
        }
    </style>
</head>
<body>
    <div class="student-id">学生ID: <span id="student-id">1</span></div>
    
    <div class="header">
        <h1>URL组成互动游戏</h1>
        <p class="subtitle">学习网页地址的组成部分及其含义</p>
    </div>

    <div class="score-container">
        <div class="score">得分: <span id="score">0</span></div>
        <div class="completed">完成进度: <span id="completed">0</span>/2</div>
    </div>

    <div class="games-container">
        <div class="game">
            <h2 class="game-title">URL组成配对游戏</h2>
            <div class="example-url">示例: <span id="current-url">https://www.example.com/path/to/page.html</span></div>
            <div class="matching-game">
                <div class="items-container" id="left-items">
                    <!-- 动态生成 -->
                </div>
                
                <div class="canvas-container">
                    <canvas id="connection-canvas"></canvas>
                </div>
                
                <div class="items-container" id="right-items">
                    <!-- 动态生成 -->
                </div>
            </div>
            <div class="feedback" id="matching-feedback"></div>
            <div class="url-explanation" id="url-explanation">
                <!-- 动态生成 -->
            </div>
        </div>

        <div class="game">
            <h2 class="game-title">URL顺序拖拽游戏</h2>
            <div class="example-url">目标: 构建完整的URL <span id="target-url">https://www.example.com/path/to/page.html</span></div>
            <div class="drag-game">
                <div class="drag-container" id="drag-container">
                    <!-- 动态生成 -->
                </div>
                
                <div class="drop-zone" id="drop-zone">
                    <div class="drop-slot" data-slot="1"></div>
                    <div class="drop-slot" data-slot="2"></div>
                    <div class="drop-slot" data-slot="3"></div>
                </div>
                
                <div class="feedback" id="drag-feedback"></div>
            </div>
            <div class="url-explanation" id="drag-explanation">
                <!-- 动态生成 -->
            </div>
        </div>
    </div>

    <div class="controls">
        <button id="reset-btn">重置游戏</button>
        <button id="hint-btn">游戏说明</button>
        <button id="new-url-btn">更换URL</button>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // URL数据库 - 10个不同的真实URL示例
            const urlDatabase = [
                {
                    fullUrl: "https://www.chnmuseum.cn/portals/0/web/zt/202509ffxskzh/",
                    protocol: "https",
                    domain: "www.chnmuseum.cn",
                    path: "portals/0/web/zt/202509ffxskzh/",
                    protocolDesc: "网络协议(安全)",
                    domainDesc: "域名(中国国家博物馆)",
                    pathDesc: "路径(特展页面路径)",
                    explanation: "• <strong>https</strong>: 安全超文本传输协议，确保数据传输安全<br>• <strong>www.chnmuseum.cn</strong>: 中国国家博物馆的域名<br>• <strong>portals/0/web/zt/202509ffxskzh/</strong>: 指向2025年9月某个特展的路径"
                },
                {
                    fullUrl: "http://www.moe.gov.cn/jyb_xwfb/xw_zt/moe_357/jyzt_2022/",
                    protocol: "http",
                    domain: "www.moe.gov.cn",
                    path: "jyb_xwfb/xw_zt/moe_357/jyzt_2022/",
                    protocolDesc: "网络协议",
                    domainDesc: "域名(教育部)",
                    pathDesc: "路径(教育专题页面)",
                    explanation: "• <strong>http</strong>: 超文本传输协议<br>• <strong>www.moe.gov.cn</strong>: 中华人民共和国教育部官方网站<br>• <strong>jyb_xwfb/xw_zt/moe_357/jyzt_2022/</strong>: 教育部新闻发布/专题/2022教育专题路径"
                },
                {
                    fullUrl: "https://www.nhc.gov.cn/xcs/yqfkdt/202211/abc123.html",
                    protocol: "https",
                    domain: "www.nhc.gov.cn",
                    path: "xcs/yqfkdt/202211/abc123.html",
                    protocolDesc: "网络协议(安全)",
                    domainDesc: "域名(国家卫健委)",
                    pathDesc: "路径(疫情发布页面)",
                    explanation: "• <strong>https</strong>: 安全超文本传输协议<br>• <strong>www.nhc.gov.cn</strong>: 国家卫生健康委员会官方网站<br>• <strong>xcs/yqfkdt/202211/abc123.html</strong>: 疫情防控/2022年11月/具体页面"
                },
                {
                    fullUrl: "https://www.gov.cn/zhengce/2022-10/25/content_5678901.htm",
                    protocol: "https",
                    domain: "www.gov.cn",
                    path: "zhengce/2022-10/25/content_5678901.htm",
                    protocolDesc: "网络协议(安全)",
                    domainDesc: "域名(中国政府网)",
                    pathDesc: "路径(政策文件页面)",
                    explanation: "• <strong>https</strong>: 安全超文本传输协议<br>• <strong>www.gov.cn</strong>: 中华人民共和国中央人民政府门户网站<br>• <strong>zhengce/2022-10/25/content_5678901.htm</strong>: 政策/2022年10月25日/具体内容页面"
                },
                {
                    fullUrl: "http://www.cnsa.gov.cn/n6758823/n6758838/cindex.html",
                    protocol: "http",
                    domain: "www.cnsa.gov.cn",
                    path: "n6758823/n6758838/cindex.html",
                    protocolDesc: "网络协议",
                    domainDesc: "域名(国家航天局)",
                    pathDesc: "路径(机构介绍页面)",
                    explanation: "• <strong>http</strong>: 超文本传输协议<br>• <strong>www.cnsa.gov.cn</strong>: 国家航天局官方网站<br>• <strong>n6758823/n6758838/cindex.html</strong>: 机构导航/具体部门/中文首页"
                },
                {
                    fullUrl: "https://www.beijing.gov.cn/ywdt/gzdt/202210/t20221028_123456.html",
                    protocol: "https",
                    domain: "www.beijing.gov.cn",
                    path: "ywdt/gzdt/202210/t20221028_123456.html",
                    protocolDesc: "网络协议(安全)",
                    domainDesc: "域名(北京市政府)",
                    pathDesc: "路径(工作动态页面)",
                    explanation: "• <strong>https</strong>: 安全超文本传输协议<br>• <strong>www.beijing.gov.cn</strong>: 北京市人民政府门户网站<br>• <strong>ywdt/gzdt/202210/t20221028_123456.html</strong>: 政务动态/工作动态/2022年10月/具体文件"
                },
                {
                    fullUrl: "http://www.customs.gov.cn/customs/302249/302266/302267/index.html",
                    protocol: "http",
                    domain: "www.customs.gov.cn",
                    path: "customs/302249/302266/302267/index.html",
                    protocolDesc: "网络协议",
                    domainDesc: "域名(海关总署)",
                    pathDesc: "路径(信息公开页面)",
                    explanation: "• <strong>http</strong>: 超文本传输协议<br>• <strong>www.customs.gov.cn</strong>: 中华人民共和国海关总署官方网站<br>• <strong>customs/302249/302266/302267/index.html</strong>: 海关业务/分类编号/具体信息页面"
                },
                {
                    fullUrl: "https://www.changcheng.gov.cn/xxgk/zfxxgkml/202211/123456789.html",
                    protocol: "https",
                    domain: "www.changcheng.gov.cn",
                    path: "xxgk/zfxxgkml/202211/123456789.html",
                    protocolDesc: "网络协议(安全)",
                    domainDesc: "域名(长城县政府)",
                    pathDesc: "路径(信息公开页面)",
                    explanation: "• <strong>https</strong>: 安全超文本传输协议<br>• <strong>www.changcheng.gov.cn</strong>: 示例县政府门户网站<br>• <strong>xxgk/zfxxgkml/202211/123456789.html</strong>: 信息公开/政府信息公开目录/2022年11月/具体文件"
                },
                {
                    fullUrl: "http://www.sport.gov.cn/n315/n331/c1234567/content.html",
                    protocol: "http",
                    domain: "www.sport.gov.cn",
                    path: "n315/n331/c1234567/content.html",
                    protocolDesc: "网络协议",
                    domainDesc: "域名(国家体育总局)",
                    pathDesc: "路径(体育政策页面)",
                    explanation: "• <strong>http</strong>: 超文本传输协议<br>• <strong>www.sport.gov.cn</strong>: 国家体育总局官方网站<br>• <strong>n315/n331/c1234567/content.html</strong>: 分类导航/具体栏目/内容页面"
                },
                {
                    fullUrl: "https://www.shanghai.gov.cn/nw123456/202210/15/abc123.html",
                    protocol: "https",
                    domain: "www.shanghai.gov.cn",
                    path: "nw123456/202210/15/abc123.html",
                    protocolDesc: "网络协议(安全)",
                    domainDesc: "域名(上海市政府)",
                    pathDesc: "路径(新闻页面)",
                    explanation: "• <strong>https</strong>: 安全超文本传输协议<br>• <strong>www.shanghai.gov.cn</strong>: 上海市人民政府门户网站<br>• <strong>nw123456/202210/15/abc123.html</strong>: 新闻/2022年10月15日/具体新闻页面"
                }
            ];

            // 游戏状态
            let score = 0;
            let completedGames = 0;
            let matchingCompleted = false;
            let dragCompleted = false;
            let currentUrlIndex = 0;
            let studentId = 1;
            
            // DOM元素
            const scoreElement = document.getElementById('score');
            const completedElement = document.getElementById('completed');
            const studentIdElement = document.getElementById('student-id');
            const resetBtn = document.getElementById('reset-btn');
            const hintBtn = document.getElementById('hint-btn');
            const newUrlBtn = document.getElementById('new-url-btn');
            const matchingFeedback = document.getElementById('matching-feedback');
            const dragFeedback = document.getElementById('drag-feedback');
            const canvas = document.getElementById('connection-canvas');
            const ctx = canvas.getContext('2d');
            const currentUrlElement = document.getElementById('current-url');
            const targetUrlElement = document.getElementById('target-url');
            const urlExplanationElement = document.getElementById('url-explanation');
            const dragExplanationElement = document.getElementById('drag-explanation');
            
            // 配对游戏变量
            let selectedLeftItem = null;
            let selectedRightItem = null;
            const connections = [];
            
            // 拖拽游戏变量
            const dropSlots = document.querySelectorAll('.drop-slot');
            const dropZone = document.getElementById('drop-zone');
            
            // 生成随机学生ID (1-53)
            function generateStudentId() {
                studentId = Math.floor(Math.random() * 53) + 1;
                studentIdElement.textContent = studentId;
                
                // 根据学生ID确定URL索引，确保分布均匀
                currentUrlIndex = (studentId - 1) % urlDatabase.length;
            }
            
            // 初始化游戏
            function initGame() {
                // 重置游戏状态
                score = 0;
                completedGames = 0;
                matchingCompleted = false;
                dragCompleted = false;
                scoreElement.textContent = score;
                completedElement.textContent = completedGames;
                
                // 生成学生ID和对应URL
                generateStudentId();
                loadCurrentUrl();
                
                // 重置配对游戏
                selectedLeftItem = null;
                selectedRightItem = null;
                connections.length = 0;
                
                matchingFeedback.textContent = '';
                matchingFeedback.className = 'feedback';
                
                // 重置拖拽游戏
                dragFeedback.textContent = '';
                dragFeedback.className = 'feedback';
                dropZone.classList.remove('active');
                
                // 重绘画布
                drawConnections();
            }
            
            // 加载当前URL数据
            function loadCurrentUrl() {
                const currentUrl = urlDatabase[currentUrlIndex];
                
                // 更新显示
                currentUrlElement.textContent = currentUrl.fullUrl;
                targetUrlElement.textContent = currentUrl.fullUrl;
                urlExplanationElement.innerHTML = currentUrl.explanation;
                dragExplanationElement.innerHTML = "• 政府网站通常使用 <strong>.gov.cn</strong> 域名<br>• 路径中常包含日期、分类和具体内容标识<br>• 安全网站使用 <strong>https</strong> 协议保护数据传输";
                
                // 更新配对游戏
                updateMatchingGame(currentUrl);
                
                // 更新拖拽游戏
                updateDragGame(currentUrl);
            }
            
            // 更新配对游戏
            function updateMatchingGame(urlData) {
                const leftContainer = document.getElementById('left-items');
                const rightContainer = document.getElementById('right-items');
                
                // 清空容器
                leftContainer.innerHTML = '';
                rightContainer.innerHTML = '';
                
                // 创建左侧项目 (URL组成部分)
                const leftItemsData = [
                    { id: "1", content: urlData.protocol },
                    { id: "2", content: urlData.domain },
                    { id: "3", content: urlData.path }
                ];
                
                // 创建右侧项目 (含义描述)
                const rightItemsData = [
                    { id: "1", content: urlData.protocolDesc },
                    { id: "2", content: urlData.domainDesc },
                    { id: "3", content: urlData.pathDesc }
                ];
                
                // 洗牌右侧项目
                shuffleArray(rightItemsData);
                
                // 添加左侧项目
                leftItemsData.forEach(item => {
                    const itemElement = document.createElement('div');
                    itemElement.className = 'item';
                    itemElement.dataset.id = item.id;
                    itemElement.textContent = item.content;
                    itemElement.addEventListener('click', handleLeftItemClick);
                    leftContainer.appendChild(itemElement);
                });
                
                // 添加右侧项目
                rightItemsData.forEach(item => {
                    const itemElement = document.createElement('div');
                    itemElement.className = 'item';
                    itemElement.dataset.id = item.id;
                    itemElement.textContent = item.content;
                    itemElement.addEventListener('click', handleRightItemClick);
                    rightContainer.appendChild(itemElement);
                });
            }
            
            // 更新拖拽游戏
            function updateDragGame(urlData) {
                const dragContainer = document.getElementById('drag-container');
                
                // 清空容器
                dragContainer.innerHTML = '';
                
                // 创建拖拽项目
                const dragItemsData = [
                    { id: "1", content: urlData.protocol + "://" },
                    { id: "2", content: urlData.domain },
                    { id: "3", content: "/" + urlData.path }
                ];
                
                // 洗牌拖拽项目
                shuffleArray(dragItemsData);
                
                // 添加拖拽项目
                dragItemsData.forEach(item => {
                    const itemElement = document.createElement('div');
                    itemElement.className = 'drag-item';
                    itemElement.draggable = true;
                    itemElement.dataset.id = item.id;
                    itemElement.textContent = item.content;
                    
                    itemElement.addEventListener('dragstart', handleDragStart);
                    itemElement.addEventListener('dragend', handleDragEnd);
                    
                    dragContainer.appendChild(itemElement);
                });
                
                // 重置槽位
                dropSlots.forEach(slot => {
                    slot.textContent = '';
                    slot.classList.remove('filled');
                    delete slot.dataset.itemId;
                });
            }
            
            // 洗牌函数
            function shuffleArray(array) {
                for (let i = array.length - 1; i > 0; i--) {
                    const j = Math.floor(Math.random() * (i + 1));
                    [array[i], array[j]] = [array[j], array[i]];
                }
                return array;
            }
            
            // 绘制连接线
            function drawConnections() {
                // 设置画布尺寸
                canvas.width = canvas.offsetWidth;
                canvas.height = canvas.offsetHeight;
                
                // 清除画布
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                // 绘制所有连接线
                connections.forEach(conn => {
                    const leftItem = document.querySelector(`#left-items .item[data-id="${conn.leftId}"]`);
                    const rightItem = document.querySelector(`#right-items .item[data-id="${conn.rightId}"]`);
                    
                    if (leftItem && rightItem) {
                        const leftRect = leftItem.getBoundingClientRect();
                        const rightRect = rightItem.getBoundingClientRect();
                        const canvasRect = canvas.getBoundingClientRect();
                        
                        const startX = 0;
                        const startY = leftRect.top + leftRect.height/2 - canvasRect.top;
                        const endX = canvas.width;
                        const endY = rightRect.top + rightRect.height/2 - canvasRect.top;
                        
                        // 绘制连线
                        ctx.beginPath();
                        ctx.moveTo(startX, startY);
                        ctx.bezierCurveTo(
                            startX + canvas.width/2, startY,
                            startX + canvas.width/2, endY,
                            endX, endY
                        );
                        ctx.strokeStyle = conn.correct ? '#2ecc71' : '#e74c3c';
                        ctx.lineWidth = 3;
                        ctx.stroke();
                    }
                });
            }
            
            // 配对游戏事件处理
            function handleLeftItemClick() {
                if (matchingCompleted) return;
                
                // 取消之前的选择
                document.querySelectorAll('#left-items .item').forEach(i => i.classList.remove('selected'));
                document.querySelectorAll('#right-items .item').forEach(i => i.classList.remove('selected'));
                
                // 选择当前项目
                this.classList.add('selected');
                selectedLeftItem = this;
                
                // 如果已经选择了右侧项目，检查匹配
                if (selectedRightItem) {
                    checkMatch();
                }
            }
            
            function handleRightItemClick() {
                if (matchingCompleted) return;
                
                // 取消之前的选择
                document.querySelectorAll('#left-items .item').forEach(i => i.classList.remove('selected'));
                document.querySelectorAll('#right-items .item').forEach(i => i.classList.remove('selected'));
                
                // 选择当前项目
                this.classList.add('selected');
                selectedRightItem = this;
                
                // 如果已经选择了左侧项目，检查匹配
                if (selectedLeftItem) {
                    checkMatch();
                }
            }
            
            // 检查匹配
            function checkMatch() {
                const leftId = selectedLeftItem.dataset.id;
                const rightId = selectedRightItem.dataset.id;
                
                // 检查是否匹配
                const isMatch = leftId === rightId;
                
                // 记录连接
                connections.push({
                    leftId: leftId,
                    rightId: rightId,
                    correct: isMatch
                });
                
                // 更新UI
                if (isMatch) {
                    selectedLeftItem.classList.add('matched');
                    selectedRightItem.classList.add('matched');
                    matchingFeedback.textContent = '匹配正确！+10分';
                    matchingFeedback.className = 'feedback success';
                    score += 10;
                } else {
                    matchingFeedback.textContent = '匹配错误！-5分';
                    matchingFeedback.className = 'feedback error';
                    score = Math.max(0, score - 5);
                }
                
                // 更新分数
                scoreElement.textContent = score;
                
                // 重绘连接线
                drawConnections();
                
                // 重置选择
                selectedLeftItem = null;
                selectedRightItem = null;
                
                // 检查游戏是否完成
                const allMatched = Array.from(document.querySelectorAll('#left-items .item')).every(item => 
                    item.classList.contains('matched')
                );
                
                if (allMatched && !matchingCompleted) {
                    matchingCompleted = true;
                    completedGames++;
                    completedElement.textContent = completedGames;
                    matchingFeedback.textContent = '恭喜！配对游戏完成！';
                    
                    if (completedGames === 2) {
                        showCompletionMessage();
                    }
                }
            }
            
            // 拖拽游戏事件处理
            function handleDragStart(e) {
                if (dragCompleted) return;
                
                this.classList.add('dragging');
                e.dataTransfer.setData('text/plain', this.dataset.id);
                dropZone.classList.add('active');
            }
            
            function handleDragEnd() {
                this.classList.remove('dragging');
                dropZone.classList.remove('active');
            }
            
            // 初始化拖拽事件
            function initDragEvents() {
                dropSlots.forEach(slot => {
                    slot.addEventListener('dragover', function(e) {
                        if (dragCompleted) return;
                        
                        e.preventDefault();
                    });
                    
                    slot.addEventListener('drop', function(e) {
                        if (dragCompleted) return;
                        
                        e.preventDefault();
                        const id = e.dataTransfer.getData('text/plain');
                        const draggedItem = document.querySelector(`.drag-item[data-id="${id}"]`);
                        
                        // 如果槽位已有内容，先移除
                        if (this.textContent) {
                            const existingId = this.dataset.itemId;
                            const existingItem = document.querySelector(`.drag-item[data-id="${existingId}"]`);
                            if (existingItem) {
                                existingItem.style.display = 'block';
                            }
                        }
                        
                        // 放置项目到槽位
                        this.textContent = draggedItem.textContent;
                        this.dataset.itemId = id;
                        this.classList.add('filled');
                        draggedItem.style.display = 'none';
                        
                        // 检查顺序
                        checkOrder();
                    });
                });
            }
            
            // 检查URL顺序
            function checkOrder() {
                // 检查所有槽位是否已填满
                const allFilled = Array.from(dropSlots).every(slot => 
                    slot.classList.contains('filled')
                );
                
                if (!allFilled) return;
                
                // 检查顺序是否正确
                let correctOrder = true;
                let urlString = '';
                
                dropSlots.forEach((slot, index) => {
                    const itemId = slot.dataset.itemId;
                    urlString += slot.textContent;
                    
                    // 检查顺序：1, 2, 3
                    if (parseInt(itemId) !== index + 1) {
                        correctOrder = false;
                    }
                });
                
                if (correctOrder) {
                    dragFeedback.textContent = '顺序正确！完整的URL: ' + urlString;
                    dragFeedback.className = 'feedback success';
                    score += 10;
                    dragCompleted = true;
                    completedGames++;
                    completedElement.textContent = completedGames;
                    
                    if (completedGames === 2) {
                        showCompletionMessage();
                    }
                } else {
                    dragFeedback.textContent = '顺序错误！请重新排列';
                    dragFeedback.className = 'feedback error';
                    score = Math.max(0, score - 5);
                    
                    // 重置槽位
                    setTimeout(() => {
                        dropSlots.forEach(slot => {
                            const itemId = slot.dataset.itemId;
                            if (itemId) {
                                const item = document.querySelector(`.drag-item[data-id="${itemId}"]`);
                                if (item) {
                                    item.style.display = 'block';
                                }
                            }
                            slot.textContent = '';
                            slot.classList.remove('filled');
                            delete slot.dataset.itemId;
                        });
                    }, 1000);
                }
                
                scoreElement.textContent = score;
            }
            
            // 显示完成消息
            function showCompletionMessage() {
                setTimeout(() => {
                    alert(`恭喜！你已完成所有游戏！\n最终得分: ${score}`);
                }, 500);
            }
            
            // 更换URL
            function changeUrl() {
                currentUrlIndex = (currentUrlIndex + 1) % urlDatabase.length;
                initGame();
            }
            
            // 事件监听
            resetBtn.addEventListener('click', initGame);
            
            hintBtn.addEventListener('click', function() {
                alert('游戏说明：\n\n1. URL组成配对游戏：\n   - 点击左侧的URL组成部分和右侧的含义进行匹配\n   - 匹配正确得10分，错误扣5分\n\n2. URL顺序拖拽游戏：\n   - 将URL组成部分拖拽到下方区域，按正确顺序排列\n   - 顺序正确得10分，错误扣5分\n\n完成两个游戏后显示最终得分！');
            });
            
            newUrlBtn.addEventListener('click', changeUrl);
            
            // 初始化游戏
            initGame();
            initDragEvents();
            
            // 初始绘制连接线
            window.addEventListener('resize', drawConnections);
            drawConnections();
        });
    </script>
</body>
</html>